<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <link rel="import" href="/views/message.html">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>我来开餐厅啦</title>
  </head>

  <body>
    <div class="root">
      <header class="container-1">
        <div class="time">第1周 星期一</div>
        <div class="money">$ 100</div>
      </header>
      <main class="container-2">
        <div class="cook-area">
          <div class="people"></div>
          <div class="recruitment">
            <i class="plus"></i>
          </div>
        </div>
        <div class="customer-area" id="customer_area">
          <div class="column">
            <div class="people"></div>
            <div class="people"></div>
          </div>
          <div class="column">
            <div class="people"></div>
            <div class="people"></div>
          </div>
        </div>
      </main>
      <form id="order_form">
        <div class="legend"> 
          <img src="/img/customer_3.png" alt="顾客" class="bg-wait">
          <p><span class="name">QIAN</span> 正在点菜，已点<span class="cost">18</span>元的菜</p>
        </div>
        <fieldset>
          <div class="title">凉菜（2选1，可不点）</div>
          <div class="item">
            <input type="checkbox" id="scales" name="scales">
            <label for="scales">凉拌SAN</label>
            <span class="ellipsis">…………………</span>
            <span class="price">$ 6</span>
          </div>
          <div class="item">
            <input type="checkbox" id="horns" name="horns">
            <label for="horns">冷切DOM</label>
            <span class="ellipsis">…………………</span>
            <span class="price">$ 6</span>
          </div>
          <div class="title">主菜（5选1，必点）</div>
          <div class="item">
            <input type="radio" id="UL炖LI" name="entree" checked>
            <label for="scales">UL炖LI</label>
            <span class="ellipsis">…………………</span>
            <span class="price">$ 6</span>
          </div>
          <div class="item">
            <input type="radio" id="红烧HEAD" name="entree">
            <label for="horns">红烧HEAD</label>
            <span class="ellipsis">…………………</span>
            <span class="price">$ 6</span>
          </div>
          <div class="item">
            <input type="radio" id="酥炸ECharts" name="entree">
            <label for="scales">酥炸ECharts</label>
            <span class="ellipsis">…………………</span>
            <span class="price">$ 6</span>
          </div>
          <div class="item">
            <input type="radio" id="炙烤CSS" name="entree">
            <label for="scales">炙烤CSS</label>
            <span class="ellipsis">…………………</span>
            <span class="price">$ 6</span>
          </div>
          <div class="item">
            <input type="radio" id="清蒸DIV" name="entree">
            <label for="horns">清蒸DIV</label>
            <span class="ellipsis">…………………</span>
            <span class="price">$ 6</span>
          </div>
          <div class="title">饮料（2选1，可不点）</div>
          <div class="item">
            <input type="checkbox" id="鲜榨Flex" name="drinks">
            <label for="鲜榨Flex">鲜榨Flex</label>
            <span class="ellipsis">…………………</span>
            <span class="price">$ 6</span>
          </div>
          <div class="item">
            <input type="checkbox" id="小程序奶茶" name="drinks">
            <label for="小程序奶茶">小程序奶茶</label>
            <span class="ellipsis">…………………</span>
            <span class="price">$ 6</span>
          </div>
        </fieldset>
        <div class="form-button">
          <button type="button" class="ok">点好了，快点上菜</button>
          <button type="button" class="exit" id="exit">不吃了</button>
        </div>
      </form>
      <div class="overlay" id="overlay"></div>
      <div class="start-modal" id="start_modal">
        <h2>WebMooc餐厅开业啦！</h2>
        <p>WebMooc餐厅即将开业，请认真经营你的餐厅吧</p>
        <p>经营餐厅需要做好下面几件事情，加油！</p>
        <div class="container">
          <span>招聘厨师</span>
          <span>迎接客人</span>
          <span>烹饪美食</span>
        </div>
        <button class="start-button" id="start_button">开始经营吧</button>
      </div>
      <footer class="waiting-customers" id="waiting_customers">
        <div class="people">
          <div class="progress-container">
            <span id="progress_text" class="text">等位中</span>
            <div class="progress-bar" id="progress_bar">
            </div>
          </div>
        </div>
      </footer>
    </div>
    <script type="module" src="/js/main.js"></script>
  </body>

</html>
